<template>
	<view class="content">
		<!-- 返回 -->
		<image
			class="return"
			@click="$goReturn(1)"
			src="/static/images/chicken/skin_arrow.png"
			mode="widthFix"></image>
		<!-- 规则 -->
		<image
			class="rule"
			@click="showRule"
			src="/static/images/chicken/game/question_rule.png"
			mode="widthFix"></image>
		<!-- 内容区域 -->
		<view class="different-box">
			<!-- 倒计时 -->
			<view class="djs">
				<u-count-down 
					ref="uCountDown"
					separator-size="44"
					separator-color="#ffffff"
					font-size="44"
					color="#ffffff"
					bg-color="transparent"
					:show-hours="false"
					@end="djsEnd"
					:timestamp="times"></u-count-down>
			</view>
			<!-- 个数 -->
			<view class="num">
				<view
					v-for="val in 5"
					:key="val"
					:class="{
						'num-item': true,
						right: differentNum >= val,
					}"></view>
			</view>
			<!-- 图片 -->
			<view class="pic-box">
				<view class="up">
					<image
						class="pic"
						@click="clickPic('upInfo', $event)"
						src="/static/images/chicken/game/question_feed.png"></image>
					<view
						v-for="(val, index) in differentList"
						v-show="val.choose"
						:key="index"
						:style="{
							left: val.left,
							top: val.top,
						}"
						class="choose-right"></view>
				</view>
				<view class="down">
					<image
						class="pic"
						@click="clickPic('downInfo', $event)"
						src="/static/images/chicken/game/question_feed.png"></image>
					<view
						v-for="(val, index) in differentList"
						v-show="val.choose"
						:key="index"
						:style="{
							left: val.left,
							top: val.top,
						}"
						class="choose-right"></view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="tip">
				点击图片不同，找齐五处即可领取奖励
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				times: 0,
				timer: null,
				isClick: true,
				upInfo: {},
				downInfo: {},
				chooseRight: [],
				differentList: [
					{ left: '80%', top: '20%', choose: false },
					{ left: '75%', top: '95%', choose: false },
					{ left: '60%', top: '80%', choose: false },
					{ left: '55%', top: '60%', choose: false },
					{ left: '30%', top: '40%', choose: false },
				],
			}
		},
		computed: {
			differentNum() {
				return this.differentList.filter(v => v.choose).length;
			},
		},
		onShow() {
			this.init();
		},
		onReady() {
			this.getEleInfo();
		},
		onHide() {
			clearInterval(this.timer);
		},
		methods: {
			init() {
				this.times = 60;
			},
			getEleInfo() {
				let up = uni.createSelectorQuery().select(".up .pic");
				let down = uni.createSelectorQuery().select(".down .pic");
				up.boundingClientRect(data => {
					// console.log(data);
					this.upInfo = data;
				}).exec();
				down.boundingClientRect(data => {
					// console.log(data);
					this.downInfo = data;
				}).exec();
			},
			djsEnd() {
				this.isClick = false;
			},
			showRule() {
				console.log('规则');
			},
			// 点击图片
			clickPic(flag, e) {
				let detail = e.detail;
				let info = this[flag];
				let left = Math.round((detail.x - info.left) / info.width * 100);
				let top = Math.round((detail.y - info.top) / info.height * 100);
				this.differentList.forEach(val => {
					if (!val.choose) {
						let leftNum = Number.parseInt(val.left);
						let topNum = Number.parseInt(val.top);
						let leftCorrect = leftNum > left - 3 && leftNum < left + 3;
						let topCorrect = topNum > top - 3 && topNum < top + 3;
						val.choose = leftCorrect && topCorrect;
					};
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url('/static/images/chicken/game/different_bg.png') no-repeat center center;
		background-size: 100%;
		.different-box {
			position: absolute;
			left: 26rpx;
			top: 160rpx;
			width: calc(100% - 52rpx);
			// background-color: rebeccapurple;
			.djs {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 204rpx;
				height: 70rpx;
				background: url('/static/images/chicken/game/different_djs.png') no-repeat center center;
				background-size: 100% 100%;
				margin: 0 auto;
				// font-weight: bold;
			}
			.num {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;
				.num-item {
					width: 72rpx;
					height: 72rpx;
					background: url('/static/images/chicken/game/different_no.png') no-repeat center center;
					background-size: 100% 100%;
					margin: 0 10rpx;
					&.right {
						background-image: url('/static/images/chicken/game/different_yes.png');
					}
				}
			}
			.pic-box {
				margin-top: 45rpx;
				view {
					position: relative;
					width: 100%;
					height: 498rpx;
					padding: 2rpx 2rpx 0;
					margin-bottom: 20rpx;
					background: url('/static/images/chicken/game/different_pic_bg.png') no-repeat center center;
					background-size: 100% 100%;
					overflow: hidden;
					.pic {
						width: calc(100% - 4rpx);
						height: 478rpx;
						margin: 2rpx 0 0 2rpx;
					}
					.choose-right {
						position: absolute;
						width: 70rpx;
						height: 70rpx;
						transform: translate(-50%, -50%);
						background: url('/static/images/chicken/game/different_circle.png') no-repeat center center;
						background-size: 100% 100%;
					}
				}
			}
			.tip {
				margin-top: 50rpx;
				text-align: center;
				font-size: 28rpx;
				color: #000;
			}
		}
		.return {
			position: absolute;
			left: 26rpx;
			top: 30rpx;
			width: 64rpx;
		}
		.rule {
			position: absolute;
			right: 23rpx;
			top: 10rpx;
			width: 100rpx;
		}
	}
</style>